<template>
  <div class="container">
    <div class="tag">
      <span
        class="item"
        :class="{ cur: cur == 'balance' }"
        @click="changeChart('balance')"
        >当日可用余额走势</span
      >
      <span
        class="item"
        :class="{ cur: cur == 'flow' }"
        @click="changeChart('flow')"
        >当日资金流入走势</span
      >
    </div>
    <div class="chart" style="width: 100%">
      <div ref="chart" style="height: 235px">Loading...</div>
    </div>
  </div>
</template>
<script>
import draw from "../script/draw";
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    dir: String,
  },
  data() {
    return {
      cur: "balance",
    };
  },
  watch: {
    dataSource(val) {
      if (Array.isArray(val) && val.length > 0) {
        this.$nextTick(() => {
          draw({
            container: this.$refs.chart,
            data: val,
            type: "balance",
            dir: this.dir,
          });
        });
      }
    },
  },

  methods: {
    changeChart(type) {
      this.cur = type;
      draw({
        container: this.$refs.chart,
        data: this.dataSource,
        type,
        dir: this.dir,
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../style/var.scss";
.container {
  .tag {
    background: $color;
    // line-height: 34px;
    padding: 5px 10px;
    .item {
      font-size: 16px;
      color: #cccccc;
      font-weight: 400;
      cursor: pointer;
      padding: 4px 8px;
      margin-right: 21px;
      &.cur {
        border-radius: 4px;
        background: #35497c;
        display: inline-block;
      }
    }
  }
}
</style>
